HTML meta tags are snippets of textual content placed within the <head> tag of a webpage. They offer metadata approximately the HTML file, along with information about the page's content material, key phrases, creator, and viewport settings. Meta tags no longer display content material at once on the page but are used by browsers and search engines like Google and Yahoo to understand the web page's motive and content material better.
List of all meta tags in HTML
This table provides a quick reference to commonly used meta tags in HTML, along with their purposes and examples.
| Meta Tag | Purpose | Example |
|---|---|---|
<meta charset> | Specifies the character encoding for the HTML document | <meta charset="UTF-8"> |
<meta name="viewport"> | Controls the viewport settings for responsive web design | <meta name="viewport" content="width=device-width, initial-scale=1"> |
<meta name="description"> | Provides a webpage description to search engines | <meta name="description" content="This is an example description"> |
<meta name="keywords"> | Specifies keywords to search engines | <meta name="keywords" content="HTML, CSS, XML, JavaScript"> |
<meta name="author"> | Defines the author of the document | <meta name="author" content="John Doe"> |
<meta name="robots"> | Specifies the behavior of search engine crawlers | <meta name="robots" content="index, follow"> |
<meta http-equiv="refresh"> | Refreshes the page after a specified number of seconds | <meta http-equiv="refresh" content="30"> |
<meta http-equiv="X-UA-Compatible"> | Sets the mode for Internet Explorer | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
<meta property="og:title"> | Open Graph: Title of the object | <meta property="og:title" content="Example Title"> |
<meta property="og:description"> | Open Graph: Description of the object | <meta property="og:description" content="Example Description"> |
<meta property="og:image"> | Open Graph: Image URL | <meta property="og:image" content="http://example.com/image.jpg"> |
<meta property="og:url"> |
Open Graph: URL of the object | <meta property="og:url" content="http://example.com/page.html"> |
<meta name="twitter:card"> |
Twitter: Type of content | <meta name="twitter:card" content="summary_large_image"> |
<meta name="twitter:site"> |
Twitter: Site username | <meta name="twitter:site" content="@site_username"> |
<meta name="twitter:title"> |
Twitter: Title of the content | <meta name="twitter:title" content="Example Title"> |
<meta name="twitter:description"> |
Twitter: Description of the content | <meta name="twitter:description" content="Example Description"> |
<meta name="twitter:image"> |
Twitter: Image URL | <meta name="twitter:image" content="http://example.com/image.jpg"> |
<meta name="theme-color"> |
Sets the browser's theme color | <meta name="theme-color" content="#4285f4"> |
<meta name="apple-mobile-web-app-capable"> |
Enables web app on Apple devices | <meta name="apple-mobile-web-app-capable" content="yes"> |
<meta name="apple-mobile-web-app-status-bar-style"> |
Apple status bar style | <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
Common Meta Tags and Their Uses
Meta Description Tag: Provides a summary of the page's content. Search engines often display this description in search results.
Example:
<meta name="description" content="This is an example of a meta description.">
Meta Keywords Tag: Contains a list of keywords relevant to the page's content. Note that modern search engines do not heavily rely on this tag for ranking.
Example:
<meta name="keywords" content="HTML, meta tags, example, tutorial">
Meta Author Tag: Specifies the author of the HTML document.
Example:
<meta name="author" content="Writer Name">
Meta Charset Tag: Defines the character set used by the HTML document, ensuring proper rendering of text.
Example:
<meta charset="UTF-8">
Meta Refresh Tag: Sets a time interval for the page to refresh automatically or redirects the browser to another URL after a specified time.
Example (refresh every 30 seconds):
<meta http-equiv="refresh" content="30">
Example (redirect to another page after 5 seconds):
<meta http-equiv="refresh" content="5;url=https://www.example.com">
Example HTML Document with Meta Tags
Here is a sample HTML document incorporating various meta tags:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character set declaration to ensure proper text rendering -->
<meta charset="UTF-8">
<!-- Viewport settings for responsive design on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Description for search engines to display in search results -->
<meta name="description" content="Explore a comprehensive guide on HTTP request methods in HTML, including GET, POST, PUT, DELETE, and PATCH, and their use in web development.">
<!-- Keywords for SEO purposes -->
<meta name="keywords" content="HTML, HTTP, request methods, GET, POST, PUT, DELETE, PATCH, web development">
<!-- Author of the document -->
<meta name="author" content="Your Name">
<!-- Title for search engines and browsers -->
<meta name="title" content="Understanding HTTP Request Methods in HTML: A Comprehensive Guide">
<!-- Title displayed in the browser tab -->
<title>Understanding HTTP Request Methods in HTML: A Comprehensive Guide</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a sample HTML document demonstrating the use of meta tags.</p>
</body>
</html>
Summary
Meta tags are a fundamental thing of HTML that provide critical data approximately a web page. They play a crucial function in search engine optimization, consumer experience, and the best functioning of internet pages through distinctive gadgets and browsers. By knowledge and efficiently imposing meta tags, internet builders can improve how serps index their pages and the way users interact with their content.
Leave Comment